// ===============================
// Conductivity 组件专属样式
// ===============================

.conductivity-page {
	min-height: 100vh;
	background: var(--theme-content-bg);
	color: var(--theme-content-text);
	padding: 80px 0;

	.container {
		max-width: 1400px;
		margin: 0 auto;
	}

	.page-header {
		text-align: center;
		margin-bottom: 40px;

		.page-title {
			font-size: 3rem;
			font-weight: 700;
			background: var(--theme-gradient-title);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			margin-bottom: 10px;
		}

		.page-subtitle {
			font-size: 1.2rem;
			color: var(--theme-content-text-muted);
			margin-bottom: 20px;
		}

		.title-divider {
			height: 2px;
			width: 100px;
			background: var(--theme-gradient-title);
			margin: 20px auto;
			border-radius: 1px;
		}
	}

	// 顶部控制栏
	.top-controls {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 15px;
		margin-bottom: 20px;
		padding: 10px 0;

		.control-group {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.theme-toggle,
		.lang-toggle {
			background: none;
			border: 1px solid var(--theme-header-border);
			border-radius: 25px;
			padding: 8px 16px;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 14px;
			font-weight: 500;
			display: flex;
			align-items: center;
			gap: 8px;
			color: var(--theme-header-text-muted);

			&:hover {
				border-color: var(--theme-accent);
				color: var(--theme-accent);
				background: var(--theme-header-hover);
			}
		}
	}

	// 主要内容区域
	.main-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30px;
		margin-bottom: 20px;
	}

	// 卡片基础样式
	.card {
		background: var(--theme-card-bg);
		border: 1px solid var(--theme-card-border);
		border-radius: 16px;
		padding: 30px;
		box-shadow: var(--theme-card-shadow);
		backdrop-filter: var(--backdrop-blur);
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-2px);
			box-shadow: var(--theme-card-shadow-hover);
		}

		h2 {
			font-size: 1.5rem;
			margin-bottom: 25px;
			color: var(--theme-accent);
			display: flex;
			align-items: center;
			gap: 10px;
		}
	}

	// 表单样式
	.form-group {
		margin-bottom: 20px;

		label {
			display: block;
			margin-bottom: 8px;
			font-weight: 500;
			color: var(--theme-content-text);
		}

		input,
		select {
			width: 100%;
			padding: 12px 16px;
			border: 1px solid var(--theme-input-border);
			border-radius: 8px;
			font-size: 16px;
			background: var(--theme-input-bg);
			color: var(--theme-input-text);
			transition: all 0.3s ease;

			&:focus {
				outline: none;
				border-color: var(--theme-accent);
				box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.1);
			}

			&::placeholder {
				color: var(--theme-input-placeholder);
			}
		}
	}

	// 元素周期表样式 - 更新为12列布局
	.periodic-table {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 6px;
		margin-bottom: 20px;
		padding: 12px;
		background: var(--theme-section-alt-bg);
		border-radius: 12px;
		max-width: 100%;

		.element {
			aspect-ratio: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid var(--theme-content-border);
			border-radius: 18px;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 16px;
			font-weight: bold;
			background: var(--theme-button-secondary-bg);
			color: var(--theme-content-text);
			position: relative;
			min-height: 45px;

			&:hover {
				background: var(--theme-button-secondary-bg-hover);
				transform: scale(1.05);
				border-color: var(--theme-accent);
			}

			&.selected {
				background: linear-gradient(135deg, #3b82f6, #42a5f5) !important;
				color: white !important;
				border-color: var(--theme-accent) !important;
			}

			// Mg元素特殊样式 - 不可点击，绿色背景
			&.mg-element {
				background: linear-gradient(135deg, #10b981, #059669) !important;
				color: white !important;
				cursor: default;

				&:hover {
					transform: none;
					background: linear-gradient(135deg, #10b981, #059669) !important;
				}
			}
		}
	}

	// Mg含量显示样式
	.mg-content-display {
		position: relative;
		display: flex;
		align-items: center;
		padding: 12px 16px;
		border-radius: 8px;
		border: 1px solid var(--theme-input-border);
		background: var(--theme-input-bg);
		transition: all 0.3s ease;
		min-height: 50px;

		.mg-label {
			font-weight: 500;
			font-size: 1rem;
			color: var(--theme-content-text-muted);
		}

		.mg-value {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font-weight: bold;
			font-size: 1.2rem;
			color: var(--theme-content-text);
		}

		&.error {
			border-color: var(--theme-error-border) !important;
			background: var(--theme-error-bg);

			.mg-label,
			.mg-value {
				color: var(--theme-error-text) !important;
			}
		}
	}

	.form-text {
		text-align: center;
		display: block;
		margin-top: 8px;
		font-size: 14px;
		color: var(--theme-content-text-muted);
	}

	// 已选择元素区域
	.selected-elements {
		background: var(--theme-section-alt-bg);
		border-radius: 8px;
		padding: 15px;
		margin-top: 15px;
		min-height: 50px;

		.element-tag {
			display: inline-block;
			background: var(--theme-gradient-primary);
			color: white;
			padding: 6px 12px;
			border-radius: 20px;
			margin: 3px;
			font-size: 14px;
			font-weight: 500;
		}
	}

	// 成分输入区域
	.composition-input {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 15px;
		margin-top: 15px;

		.composition-item {
			display: flex;
			flex-direction: column;

			input {
				margin-bottom: 8px;
			}

			label {
				font-size: 14px;
				text-align: center;
				color: var(--theme-content-text-muted);
				margin: 0;
			}
		}
	}

	// 温度输入区域
	.temperature-section {
		padding: 20px;
		background: var(--theme-section-alt-bg);
		border-radius: 12px;
		border: 1px solid var(--theme-content-border);
	}

	// 计算按钮
	.calculate-button {
		width: 100%;
		padding: 16px;
		background: var(--theme-gradient-primary);
		border: none;
		border-radius: 12px;
		color: white;
		font-size: 18px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		box-shadow: 0 4px 15px rgba(100, 181, 246, 0.3);

		&:hover:not(:disabled) {
			transform: translateY(-2px);
			box-shadow: var(--theme-button-shadow-hover);
		}

		&:disabled {
			opacity: 0.6;
			cursor: not-allowed;
			transform: none;
		}

		.loading-spinner {
			display: none;
			width: 20px;
			height: 20px;
			border: 2px solid transparent;
			border-top: 2px solid white;
			border-radius: 50%;
			animation: spin 1s linear infinite;

			&.show {
				display: inline-block;
			}
		}
	}

	// 提示区域
	.tips-section {
		padding: 15px;
		background: var(--theme-tips-bg);
		border-radius: 8px;
		margin-top: 20px;
		border: 1px solid var(--theme-content-border);

		h4 {
			color: var(--theme-accent);
			margin-bottom: 10px;
		}

		.tips-list {
			padding-left: 20px;
			margin: 0;
			list-style-type: '• ';

			li {
				margin-bottom: 5px;
				font-size: 14px;
				color: var(--theme-content-text-muted);
				line-height: 1.6;
			}
		}
	}

	// 消息区域
	.message-area {
		margin-top: 15px;

		.error-message {
			background: var(--theme-error-bg);
			border: 1px solid var(--theme-error-border);
			color: var(--theme-error-text);
			padding: 12px;
			border-radius: 8px;
			font-size: 14px;
			min-height: 20px;
		}

		.success-message {
			background: var(--theme-success-bg);
			border: 1px solid var(--theme-success-border);
			color: var(--theme-success-text);
			padding: 12px;
			border-radius: 8px;
			font-size: 14px;
		}
	}

	// 结果展示区域
	.results-section {
		grid-column: 1 / -1;
		margin-top: 20px;

		.results-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 30px;
			margin-bottom: 30px;

			.result-card {
				background: var(--theme-gradient-result);
				border-radius: 16px;
				padding: 25px;
				text-align: center;
				border: 1px solid var(--theme-accent);

				h3 {
					color: var(--theme-content-title);
					margin-bottom: 15px;
				}

				.result-value {
					font-size: 2.5rem;
					font-weight: 700;
					color: var(--theme-accent);
					margin: 10px 0;
				}

				.result-unit {
					font-size: 1.1rem;
					color: var(--theme-content-text-muted);
				}
			}
		}

		.similar-data {
			background: var(--theme-card-bg);
			border: 1px solid var(--theme-card-border);
			border-radius: 16px;
			padding: 25px;
			backdrop-filter: var(--backdrop-blur);

			h3 {
				color: var(--theme-accent);
				margin-bottom: 15px;
				display: flex;
				align-items: center;
				gap: 10px;
			}

			.similarity-info {
				margin-bottom: 15px;
				font-style: italic;
				color: var(--theme-content-text-muted);
			}

			.data-table {
				width: 100%;
				border-collapse: collapse;
				margin-top: 15px;

				th,
				td {
					padding: 12px;
					text-align: left;
					border-bottom: 1px solid var(--theme-content-border);
				}

				th {
					background: var(--theme-table-header-bg);
					color: var(--theme-table-header-text);
					font-weight: 600;
				}

				tr:hover {
					background: var(--theme-table-row-hover);
				}
			}
		}
	}
}

// ===============================
// 响应式设计
// ===============================

@media (max-width: 768px) {
	.conductivity-page {
		padding: 60px 0;

		.page-header {
			.page-title {
				font-size: 2rem;
			}

			.page-subtitle {
				font-size: 1rem;
			}
		}

		.main-content {
			grid-template-columns: 1fr;
		}

		.results-section {
			.results-grid {
				grid-template-columns: 1fr;
			}
		}

		.periodic-table {
			grid-template-columns: repeat(8, 1fr);
			gap: 4px;
			padding: 10px;

			.element {
				font-size: 14px;
				min-height: 40px;
			}
		}

		.composition-input {
			grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		}

		.top-controls {
			flex-direction: column;
			align-items: stretch;
			gap: 10px;

			.control-group {
				justify-content: center;
			}
		}
	}
}

// 超小屏幕进一步优化
@media (max-width: 480px) {
	.conductivity-page {
		.periodic-table {
			grid-template-columns: repeat(6, 1fr);

			.element {
				font-size: 12px;
				min-height: 35px;
			}
		}
	}
}

// ===============================
// 动画
// ===============================

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

// 进场动画
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.conductivity-page {
	animation: fadeInUp 0.6s ease-out;

	.card:nth-child(odd) {
		animation: slideInLeft 0.8s ease-out;
	}

	.card:nth-child(even) {
		animation: slideInRight 0.8s ease-out;
	}

	.results-section {
		animation: fadeInUp 0.8s ease-out;
	}
}
